<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 网站信息
        </span>

        <el-form v-loading="Loading" style="margin-left: 20px;" label-position="left" :model="form" label-width="80px" ref="from">
          <el-form-item label="LOGO">
            <div style="width:100px;height:100px;cursor: pointer;" @click="showCutter=true">
              <el-avatar :src="form.logoUrl" shape="square" icon="el-icon-plus" :size="100"></el-avatar>
            </div>
          </el-form-item>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="网站名称">
                <el-input v-model="form.name" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="作者">
                <el-input v-model="form.author" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="标题">
                <el-input v-model="form.title" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="banner">
                <el-input v-model="form.banner" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="关键字">
                <el-input v-model="form.keyword" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="描述">
                <el-input v-model="form.summary" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">

            <el-col :span="8">
              <el-form-item label="备案号">
                <el-input v-model="form.recordNum" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-row :gutter="24">
            <el-col :span="3">
              <el-form-item label="阿里支付">
                <el-upload
                  class="avatar-uploader"
                  name="file"
                  :action="uploadPictureHost"
                  :file-list="fileList"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="fileSuccess_ali"
                  :data="otherData"
                >
                  <img
                    v-if="form.aliPayPhoto"
                    :src="BASE_IMAGE_URL + form.aliPayPhoto"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="微信支付">
                <el-upload
                  class="avatar-uploader"
                  name="file"
                  :action="uploadPictureHost"
                  :file-list="fileList"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="fileSuccess_weixin"
                  :data="otherData"
                >
                  <img
                    v-if="form.weixinPayPhoto"
                    :src="BASE_IMAGE_URL + form.weixinPayPhoto"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>-->

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="登录方式">
                <el-checkbox-group v-model="form.loginTypeList">
                  <el-checkbox label="1" style="margin-left: 10px">账号密码</el-checkbox>
                  <el-checkbox label="2" style="margin-left: 10px">码云</el-checkbox>
                  <el-checkbox label="3" style="margin-left: 10px">Github</el-checkbox>
                  <el-checkbox label="4" style="margin-left: 10px">QQ</el-checkbox>
                  <el-checkbox label="5" style="margin-left: 10px">微信</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="网站评论">
                <el-radio-group v-model="form.startComment" size="small">
                  <el-radio-button label="1" border>开启</el-radio-button>
                  <el-radio-button label="0" border>关闭</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="submitForm('editWebInfo')">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 关注我们
        </span>

        <el-form v-loading="Loading" style="margin-left: 20px;" label-position="left" :model="form" label-width="80px" :rules="rules" ref="form">
          <el-checkbox-group v-model="form.showContactList">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" style="width: 400px"></el-input>
              <el-checkbox label="1" style="margin-left: 10px">在首页显示</el-checkbox>
            </el-form-item>

            <el-form-item label="QQ号" prop="qqNumber">
              <el-input v-model="form.qqNumber" style="width: 400px"></el-input>
              <el-checkbox label="2" style="margin-left: 10px">在首页显示</el-checkbox>
            </el-form-item>

            <el-form-item label="QQ群" prop="qqGroup">
              <el-input v-model="form.qqGroup" style="width: 400px"></el-input>
              <el-checkbox label="3" style="margin-left: 10px">在首页显示</el-checkbox>
            </el-form-item>

            <el-form-item label="github" prop="github">
              <el-input v-model="form.github" style="width: 400px"></el-input>
              <el-checkbox label="4" style="margin-left: 10px">在首页显示</el-checkbox>
            </el-form-item>

            <el-form-item label="Gitee" prop="gitee">
              <el-input v-model="form.gitee" style="width: 400px"></el-input>
              <el-checkbox label="5" style="margin-left: 10px">在首页显示</el-checkbox>
            </el-form-item>

            <el-form-item label="微信" prop="weChat">
              <el-input v-model="form.weChat" style="width: 400px"></el-input>
              <el-checkbox label="6" style="margin-left: 10px">在首页显示</el-checkbox>
            </el-form-item>
          </el-checkbox-group>

          <el-form-item>
            <el-button type="primary" @click="submitForm('editWebFollow')">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <avatar-cutter style="z-index:2001" v-if="showCutter" @cancel="showCutter = false" return-type="file" @enter="uploadAvatar"></avatar-cutter>
  </div>
</template>

<script>
import { getWebConfig, editWebInfo, editWebFollow } from "@/api/webConfig";
import AvatarCutter from "../../components/avatar-cutter/avatar-cutter";
import { getToken } from "@/utils/auth";
import { uploadFile, addPicture } from "@/api/picture";
export default {
  components: {
    AvatarCutter,
  },
  data() {
    return {
      systemSortUid: "e8bb6f8fd0136e72d46b9e08631ab5f9", //系统相册分类的uid
      showCutter: false, // 是否显示头像裁剪组件
      form: {
        loginTypeList: [],
        showContactList: [],
      },
      rules: {
        qqNumber: [
          { pattern: /[1-9]([0-9]{5,11})/, message: "请输入正确的QQ号码" },
        ],
        qqGroup: [{ pattern: /-?[1-9]\d*/, message: "请输入正确的QQ群" }],
        gitee: [
          {
            pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/,
            message: "请输入正确的Gitee地址",
          },
        ],
        github: [
          {
            pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/,
            message: "请输入正确的Github地址",
          },
        ],
        email: [
          {
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
            message: "请输入正确的邮箱",
          },
        ],
      },
    };
  },
  created() {
    // 获取配置
    this.getWebConfig();
  },
  methods: {
    getWebConfig() {
      this.Loading = true;
      getWebConfig().then((response) => {
        this.form = response.data;
        this.Loading = false;
      });
    },
    uploadAvatar(src) {
      var formData = new FormData();
      formData.append("file", src);
      formData.append("userUid", this.$store.getters.userUid);
      formData.append("sortName", "admin");
      this.$store.dispatch('app/setLoading', true);
      uploadFile(formData).then((response) => {
        //上传图片file
        let picture = {};
        picture.fileUid = response.data.uid;
        picture.pictureSortUid = this.systemSortUid;
        picture.picName = response.data.picName;
        addPicture(picture).then((resp) => {
          //添加到分类中，添加到数据库
          this.form.logoUrl = response.data.picUrl;
          this.form.logo = response.data.uid;
          this.showCutter = false;
        });
      });
    },
    submitForm(type) {
      switch (type) {
        case "editWebInfo":
          {
            this.$store.dispatch('app/setLoading', true);
            editWebInfo(this.form).then((response) => {
              this.$notify({
                title: "成功",
                message: response.data,
                type: "success",
              });
              this.getWebConfig();
            });
          }
          break;
        case "editWebFollow": {
          this.$store.dispatch('app/setLoading', true);
          editWebFollow(this.form).then((response) => {
            this.$notify({
              title: "成功",
              message: response.data,
              type: "success",
            });
            this.getWebConfig();
          });
        }
      }
    },
  },
};
</script>
